<template>
  <div style=" width: 99%; margin: auto;">
    <h2>内设机构情况</h2>
    <el-form :model="workList" ref="workList">
      <el-row>
        <el-col :span="16"><p style="font-size: 16px; font-weight: bold;">
          办事机构情况表(至少有一个办事机构)
        </p></el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button size="default" style="width: 100px;" type="primary" @click="addWorkList()">增加</el-button>
        </el-col>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="workList"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="mechanismName" label="机构名称" align="center" width="180">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismName'" :rules="workRules.mechanismName">
                  <el-input v-model="scope.row.mechanismName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismResponsibleName" label="负责人姓名" align="center" width="180">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismResponsibleName'"
                              :rules="workRules.mechanismResponsibleName">
                  <el-input v-model="scope.row.mechanismResponsibleName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismTelephone" label="联系方式" align="center" width="180">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismTelephone'" :rules="workRules.mechanismTelephone">
                  <el-input type="number" v-model="scope.row.mechanismTelephone" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="establishTime" label="设立时间" align="center" width="160">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].establishTime'" :rules="workRules.establishTime">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="scope.row.establishTime"
                    type="date"
                    placeholder="设立时间">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismAddress" label="注册地址" align="center" width="250">

              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismAddress'" :rules="workRules.mechanismAddress">
                  <el-input v-model="scope.row.mechanismAddress" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text"  size="default" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-form :model="entityList" ref="entityList">
      <el-row style="margin-top: 50px;">
        <el-col :span="16"><p style="font-size: 16px; font-weight: bold;">
          实体机构情况表（没有就不填）
        </p></el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button style="width: 100px;" size="default" type="primary" @click="addEntityList()">增加</el-button>
        </el-col>
        <el-col :span="24">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" size="default" :data="entityList"
                    border>
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column prop="mechanismName" label="机构名称" align="center" width="200">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismName'" :rules="entityRules.mechanismName">
                  <el-input v-model="scope.row.mechanismName" placeholder="请输入" />
                </el-form-item>
              </template>

            </el-table-column>
            <el-table-column prop="mechanismRegisteredCapital" label="注册资金" align="center" width="160">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismRegisteredCapital'"
                              :rules="entityRules.mechanismRegisteredCapital">
                  <el-input type="number" v-model="scope.row.mechanismRegisteredCapital" placeholder="请输入">
                    <template #append>万元</template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="establishTime" label="设立时间" align="center" width="160">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].establishTime'" :rules="entityRules.establishTime">
                  <el-date-picker
                    value-format="YYYY-MM-DD"
                    v-model="scope.row.establishTime"
                    type="date"
                    placeholder="设立时间">
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismShareholdingRatio" label="持股比例" align="center" width="150">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismShareholdingRatio'"
                              :rules="entityRules.mechanismShareholdingRatio">
                  <el-input type="number" v-model="scope.row.mechanismShareholdingRatio" placeholder="请输入">
                    <template #append>%</template>
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="mechanismBusinessScope" label="经营范围" align="center" width="500">

              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].mechanismBusinessScope'"
                              :rules="entityRules.mechanismBusinessScope">
                  <el-input v-model="scope.row.mechanismBusinessScope" placeholder="请输入" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text"  size="default" @click="handleDelete2(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin-top: 20px;"><p>
      注：实体机构是指社会组织因自身业务活动和与其宗旨相适应的需要，举办的事业性实体、经济实体(可以投资设立企业法人，也可以设立非法人的经营机构)或者民办非企业单位。</p>
    </div>
    <el-dialog title="新增办事机构" v-model="workDialog">
      <el-form :model="work" ref="work" label-width="80px" label-position="top">
        <el-row type="flex" style="flex-wrap: wrap;" :gutter="20">
          <el-col :span="11">
            <el-form-item label="机构名称" prop="mechanismName">
              <el-input v-model="work.mechanismName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="负责人姓名" prop="mechanismResponsibleName">
              <el-input v-model="work.mechanismResponsibleName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="联系方式" prop="mechanismTelephone" label-width="140px">
              <el-input v-model="work.mechanismTelephone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设立时间" prop="establishTime">
              <el-date-picker type="date" value-format="YYYY-MM-DD" placeholder="设立时间" v-model="work.establishTime"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="注册地址" prop="mechanismAddress">
              <el-input v-model="work.mechanismAddress" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="workDialog = false">取 消</el-button>
        <el-button type="primary" @click="addWorkList()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增实体机构" v-model="entityDialog">
      <el-form :model="entity" ref="entity" label-width="80px" label-position="top">
        <el-row type="flex" style="flex-wrap: wrap;" :gutter="20">
          <el-col :span="11">
            <el-form-item label="机构名称" prop="mechanismName">
              <el-input v-model="entity.mechanismName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="注册资金" prop="mechanismRegisteredCapital">
              <el-input type="number" v-model="entity.mechanismRegisteredCapital" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设立时间" prop="establishTime">
              <el-date-picker type="date" value-format="YYYY-MM-DD" placeholder="设立时间" v-model="work.establishTime"
                              style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="持股比例" prop="mechanismShareholdingRatio">
              <el-input type="number" v-model="entity.mechanismShareholdingRatio" placeholder="请输入">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="机构经营范围" prop="mechanismBusinessScope">
              <el-input type="textarea" v-model="entity.mechanismBusinessScope" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="entityDialog = false">取 消</el-button>
        <el-button type="primary" @click="addEntityList()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTableInfoByPage, deleteJG,
  mfSaveMechanismEntity,
  mfSaveMechanismWork,
  mfSaveSupervisory
} from '@/views/yearCheck/ykb/mf/mf'

export default {
  data() {
    return {
      sexOptions: [{ id: '1', name: '男' }, { id: '2', name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      workDialog: false,
      entityDialog: false,
      //办事机构
      workList: [],
      //实体机构
      entityList: [],
      work: {
        mechanismName: '',//机构名称
        mechanismResponsibleName: '',//机构负责人姓名
        mechanismTelephone: '',//联系方式
        establishTime: '',//($date-time)设立时间/备案时间
        mechanismAddress: '',//住所/注册地址
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//审查年度
        mechanismType: '1',//机构类型1-办事机构 2-实体机构 3-分支机构 4-代表机构
        organizationBaseId: '1'//社团组织id
      },
      entity: {
        mechanismName: '',//机构名称
        mechanismRegisteredCapital: '',//注册资金
        establishTime: '',//($date-time)设立时间/备案时间
        mechanismShareholdingRatio: '',//持股比例
        mechanismBusinessScope: '',//机构经营范围
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//审查年度
        mechanismType: '2',//机构类型1-办事机构 2-实体机构 3-分支机构 4-代表机构
        organizationBaseId: '1'//社团组织id},
      },
      workRules: {
        mechanismName: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismResponsibleName: [{ required: true, message: '请完善', trigger: 'blur' }],
        mechanismTelephone: [{ required: true, message: '请完善', trigger: 'blur' }],
        establishTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        mechanismAddress: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      entityRules: {
        // mechanismName: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismRegisteredCapital: [{ required: true, message: '请完善', trigger: 'blur' }],
        // establishTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        // mechanismShareholdingRatio: [{ required: true, message: '请完善', trigger: 'blur' }],
        // mechanismBusinessScope: [{ required: true, message: '请完善', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    handleDelete(index) {
      console.log(this.workList[index])
      this.workList.splice(index, 1);
    },
    handleDelete2(index) {
      if(this.entityList[index].id){
        deleteJG({creditCode: localStorage.getItem('creditCode'),examineYear: localStorage.getItem('examineYear'),mechanismType: '2'}).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      }else{
        this.entityList.splice(index, 1);
      }
    },
    getInfo() {
      getTableInfoByPage(5).then(response => {
        console.log(response.data)
        this.workList = response.data.workList
        this.entityList = response.data.entityList
        if (this.entityList == null) {
          this.entityList = []
        }
        if (this.workList == null) {
          this.workList = []
        }
      })
    },
    postInfo() {
      this.$refs.workList.validate(valid => {
        if (valid) {
          for (let i = 0; i < this.workList.length; i++) {
            this.workList[i].creditCode = localStorage.getItem('creditCode')
            this.workList[i].examineYear = localStorage.getItem('examineYear')
          }
          mfSaveMechanismWork(this.workList).then(response => {
            this.$message({
              message: '办事机构保存成功',
              type: 'success'
            })
            this.getInfo()
          })

        } else {
          this.$message({
            message: '请填写完整办事机构！',
            type: 'error'
          })

        }
      })
      this.$refs.entityList.validate(valid => {
        if (valid) {
          for (let i = 0; i < this.entityList.length; i++) {
            this.entityList[i].creditCode = localStorage.getItem('creditCode')
            this.entityList[i].examineYear = localStorage.getItem('examineYear')
          }
          mfSaveMechanismEntity(this.entityList).then(response => {
            this.$message({
              message: '实体机构保存成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '请填写完整实体机构！',
            type: 'error'
          })
        }
      })
    },
    addWorkList() {
      this.workList.push(Object.assign({}, this.work))
    },
    addEntityList() {
      this.entityList.push(Object.assign({}, this.entity))

    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}

.ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.el-popover {
  height: 150px;
  overflow: auto;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
